import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:wu_you/data/repository/auth_repository.dart';
import 'package:wu_you/data/repository/home_repository.dart';
import 'package:wu_you/l10n/messages.dart';
import 'package:wu_you/res/colors.dart';
import 'package:wu_you/utils/error_handler.dart';
import 'package:wu_you/utils/utils.dart';
import 'package:wu_you/widgets/countdown_view.dart';

//忘记密码
class ForgetPwdPage extends StatefulWidget{
  @override
  ForgetPwdPageState createState() => ForgetPwdPageState();
}
class ForgetPwdPageState extends State<ForgetPwdPage>{
  final _formKey = GlobalKey<FormState>();
  final _countdownKey = GlobalKey<CountdownViewState>();
  String _name;
  String _pwd1;
  String _pwd2;
  String _phone;
  String _smsCode;

  bool showPwd1 = false;
  bool showPwd2 = false;

  var message;
  @override
  Widget build(BuildContext context) {
    message = AppLocalizations.of(context);
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("${message['forgetPsw']}"),
      ),
      body: SingleChildScrollView(
         child: Padding(
           padding: EdgeInsets.only(left: 25,right: 25,top: 20,bottom: 20),
           child: Form(
             key: _formKey,
             child: Column(
               children: [
                 TextFormField(
                   style: TextStyle(fontSize: 15,color: AppColors.textColor),
                   maxLines: 1,
                   textAlignVertical: TextAlignVertical.center,
                   textInputAction: TextInputAction.next,
                   keyboardType: TextInputType.text,
                   autofocus: false,
                   cursorColor: Theme.of(context).primaryColor,
                   validator: (value) {
                     return value.length == 0 ? '${message['enterAccount']}' : null;
                   },
                   onChanged: (value){
                     _name = value;
                   },
                   onSaved: (value) {
                     _name = value;
                   },
                   textAlign: TextAlign.start,
                   decoration: InputDecoration(
                     suffixIcon: IconButton(
                       splashColor: Colors.transparent,
                       highlightColor: Colors.transparent,
                       constraints: BoxConstraints.loose(Size(24, 24)),
                       iconSize: 1,
                       icon: Icon(Icons.clear,color: Colors.white,),
                       onPressed: () {
                       },
                     ),
                     border: UnderlineInputBorder(
                       borderSide: BorderSide.none,
                     ),
                     errorMaxLines: 1,
                     counterText: '',
                     contentPadding: EdgeInsets.only(left: 10),
                     hintText: "${message['enterAccount']}",
                     hintStyle: TextStyle(fontSize: 15,color: AppColors.textHintColor),
                   ),
                 ),
                 Divider(
                   height: 2,
                   color: HexColor("#EAEAEA"),
                 ),
                 TextFormField(
                   style: TextStyle(fontSize: 15,color: AppColors.textColor),
                   maxLines: 1,
                   textAlignVertical: TextAlignVertical.center,
                   textInputAction: TextInputAction.done,
                   maxLength: 16,
                   keyboardType: TextInputType.text,
                   autofocus: false,
                   obscureText: showPwd1 ? false : true,
                   cursorColor: Theme.of(context).primaryColor,
                   validator: (value) {
                     return value.length == 0 ? '${message['enterPwd']}' : null;
                   },
                   onSaved: (value){
                     _pwd1 = value;
                   },
                   textAlign: TextAlign.start,
                   decoration: InputDecoration(
                     fillColor: Colors.white,
                     filled: true,
                     border: UnderlineInputBorder(
                       borderSide: BorderSide.none,
                       // borderRadius: const BorderRadius.all(Radius.circular(24)),
                     ),
                     suffixIcon: IconButton(
                       splashColor: Colors.transparent,
                       highlightColor: Colors.transparent,
                       constraints: BoxConstraints.loose(Size(24, 24)),
                       iconSize: 18,
                       icon: Image.asset(showPwd1 ? Utils.getImgPath('ic_password_yes') : Utils.getImgPath('ic_password_no'),width: 18,height: 18,),
                       onPressed: () {
                         showPwd1 = !showPwd1;
                         setState(() {});
                       },
                     ),
                     prefixIconConstraints: BoxConstraints.loose(Size(64, 50)),
                     errorMaxLines: 1,
                     counterText: '',
                     contentPadding: EdgeInsets.only(left: 10),
                     hintText: "${message['enterPwd']}",
                     hintStyle: TextStyle(fontSize: 15,color: AppColors.textHintColor),
                   ),
                 ),
                 Divider(
                   height: 2,
                   color: HexColor("#EAEAEA"),
                 ),
                 TextFormField(
                   style: TextStyle(fontSize: 15,color: AppColors.textColor),
                   maxLines: 1,
                   textAlignVertical: TextAlignVertical.center,
                   textInputAction: TextInputAction.done,
                   maxLength: 16,
                   keyboardType: TextInputType.text,
                   autofocus: false,
                   obscureText: showPwd2 ? false : true,
                   cursorColor: Theme.of(context).primaryColor,
                   validator: (value) {
                     return value.length == 0 ? '${message['enterPwd']}' : null;
                   },
                   onSaved: (value){
                     _pwd2 = value;
                   },
                   textAlign: TextAlign.start,
                   decoration: InputDecoration(
                     fillColor: Colors.white,
                     filled: true,
                     border: UnderlineInputBorder(
                       borderSide: BorderSide.none,
                       // borderRadius: const BorderRadius.all(Radius.circular(24)),
                     ),
                     suffixIcon: IconButton(
                       splashColor: Colors.transparent,
                       highlightColor: Colors.transparent,
                       constraints: BoxConstraints.loose(Size(24, 24)),
                       iconSize: 18,
                       icon: Image.asset(showPwd2 ? Utils.getImgPath('ic_password_yes') : Utils.getImgPath('ic_password_no'),width: 18,height: 18,),
                       onPressed: () {
                         showPwd2 = !showPwd2;
                         setState(() {});
                       },
                     ),
                     prefixIconConstraints: BoxConstraints.loose(Size(64, 50)),
                     errorMaxLines: 1,
                     counterText: '',
                     contentPadding: EdgeInsets.only(left: 10),
                     hintText: "${message['enterPwdAgain']}",
                     hintStyle: TextStyle(fontSize: 15,color: AppColors.textHintColor),
                   ),
                 ),
                 Divider(
                   height: 2,
                   color: HexColor("#EAEAEA"),
                 ),
                 TextFormField(
                   style: TextStyle(fontSize: 15,color: AppColors.textColor),
                   maxLines: 1,
                   textAlignVertical: TextAlignVertical.center,
                   textInputAction: TextInputAction.next,
                   keyboardType: TextInputType.text,
                   autofocus: false,
                   cursorColor: Theme.of(context).primaryColor,
                   validator: (value) {
                     return value.length == 0 ? '请输入绑定手机号' : null;
                   },
                   onChanged: (value){
                     _phone = value;
                   },
                   onSaved: (value) {
                     _phone = value;
                   },
                   textAlign: TextAlign.start,
                   decoration: InputDecoration(
                     suffixIcon: IconButton(
                       splashColor: Colors.transparent,
                       highlightColor: Colors.transparent,
                       constraints: BoxConstraints.loose(Size(24, 24)),
                       iconSize: 1,
                       icon: Icon(Icons.clear,color: Colors.white,),
                       onPressed: () {
                       },
                     ),
                     border: UnderlineInputBorder(
                       borderSide: BorderSide.none,
                     ),
                     errorMaxLines: 1,
                     counterText: '',
                     contentPadding: EdgeInsets.only(left: 10),
                     hintText: "请输入绑定手机号",
                     hintStyle: TextStyle(fontSize: 15,color: AppColors.textHintColor),
                   ),
                 ),
                 Divider(
                   height: 2,
                   color: HexColor("#EAEAEA"),
                 ),
                 TextFormField(
                   style: TextStyle(color: Colors.black,fontSize: 15),
                   maxLines: 1,
                   textAlignVertical: TextAlignVertical.center,
                   textInputAction: TextInputAction.done,
                   maxLength: 4,
                   keyboardType: TextInputType.numberWithOptions(),
                   autofocus: false,
                   obscureText: false,
                   cursorColor: Theme.of(context).primaryColor,
                   validator: (value) {
                     return value.length == 4 ? null : '${message['enterCode']}';
                   },
                   onSaved: (value) {
                     _smsCode = value;
                   },
                   decoration: InputDecoration(
                     fillColor: Colors.white,
                     filled: true,
                     prefixIconConstraints: BoxConstraints.loose(Size(64, 50)),
                     suffixIconConstraints: BoxConstraints.loose(Size(100, 56)),
                     suffixIcon: CountdownView(
                       key: _countdownKey,
                       hint: Text(
                         "${message['getCode']}",
                         style: TextStyle(color: AppColors.primaryColor, fontSize: 14),
                       ),
                       onPressed: () {
                         closeKeyboard(context);
                         _onGetCode();
                       },
                     ),
                     border: UnderlineInputBorder(
                       borderSide: BorderSide.none,
                       borderRadius: const BorderRadius.all(Radius.circular(24)),
                     ),
                     errorMaxLines: 1,
                     counterText: '',
                     contentPadding: EdgeInsets.only(left: 10, right: 16),
                     hintText: "${message['enterCode']}",
                     hintStyle: TextStyle(fontSize: 15,color: AppColors.textHintColor),
                   ),
                 ),
                 Divider(
                   height: 2,
                   color: HexColor("#EAEAEA"),
                 ),

                 SizedBox(height: 20,),

                 SizedBox(
                   width: double.infinity,
                   height: 42,
                   child: ElevatedButton(
                     child: Text("${message['forgetBtn']}"),
                     style: ButtonStyle(
                       backgroundColor: MaterialStateProperty.all(AppColors.primaryColor),
                       shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),//圆角弧度
                     ),
                     onPressed: _onEditPwd,
                   ),
                 ),
               ],
             ),
           ),
         ),
      ),
    );
  }

  void _onGetCode(){
    if(_phone == null){
      ToastUtils.show("请输入绑定手机号", context);
      return;
    }
    _countdownKey.currentState.state = CountdownState.loading;
    LoadingApi.func(AuthRepository().getSmsCode(3,phone: _phone), context,showLoading: false,complete: (value){
      _countdownKey.currentState.state = CountdownState.countdown;
      ToastUtils.show("${message['sendSuccess']}", context);
    },error: (error){
      _countdownKey.currentState.state = CountdownState.init;
      ToastUtils.show("$error", context);
    });
  }

  void _onEditPwd(){
    var _state = _formKey.currentState;
    _state.save();
    if (!_state.validate()) {
      return;
    }
    if(_pwd1 != _pwd2){
      ToastUtils.show("${message['pwdInconformity']}", context);
      return;
    }
    AuthRepository().forgetPassword(username:_name, password:_pwd2, code:_smsCode,phone: _phone).then((value) {
      Navigator.pop(context);
      ToastUtils.show("${message['pwdChangeS']}", context);
    }).catchError((error) {
      ToastUtils.show("${error.message}", context);
    });
  }
}